<template>
  <div class="container">
    <vxe-toolbar>
      <template #buttons>
        <vxe-button @click="insertEvent()">新增</vxe-button>
        <vxe-button @click="$refs.xTable.removeCheckboxRow()">删除选中</vxe-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      ref="xTable"
      border
      resizable
      show-overflow
      max-height="400"
      :data="tableData"
      :edit-config="{trigger: 'click', mode: 'row'}"
      @edit-actived="editActivedEvent"
    >
      <vxe-column type="checkbox" width="60" />
      <vxe-column type="seq" width="60" />

      <vxe-column field="size" title="大小" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.size" type="text" />
        </template>
      </vxe-column>

      <vxe-column field="price" title="价格" :edit-render="{}">
        <template #edit="{ row }">
          <vxe-input v-model="row.price" type="text" @blur="shareData" />
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          price: '',
          size: '',
          spec: '',
          weight: '',
          pic: {
            url: '',
            list: []
          }
        }
      ]
    }
  },
  methods: {
    formatProjectType(value) {
      const item = this.ptypeList.find(item => item.value === value)
      return item ? item.label : value
    },
    insertEvent() {
      const $table = this.$refs.xTable
      const record = {}
      $table.insert(record)
      this.tableData.push({
        price: '',
        size: '',
        spec: '',
        weight: '',
        pic: {
          url: '',
          list: []
        }
      })
    },
    updatePnameList(row) {
      // 获取当前选择下拉列表value
      const ptype = row.attr3
      let pnameList = []
      // 如果下拉列表选择了数据
      if (ptype) {
        const item = this.cachePnameList.find(item => item.ptype === ptype)
        if (item) {
          pnameList = item.pnameList
        } else {
          this.cachePnameList.push({ ptype, pnameList })
          console.log(this.cachePnameList)
        }
      }
      this.pnameList = pnameList
    },
    editActivedEvent({ row }) {
      this.updatePnameList(row)
    },
    shareData() {
      this.$emit('share', this.tableData)
    }
  }
}

</script>
